<script>
/**
 * Orders Component
 */
export default {
  data() {
    return {
      title: "Orders",
      items: [
        {
          text: "Ecommerce",
        },
        {
          text: "Orders",
          active: true,
        },
      ],
      ordersData: [
        {
          site: "南京市公共资源网",
          siteUrl: "http://njggzy.nanjing.gov.cn/njweb/",
          num: 9,
          effective: 9,
          lose: "-",
          efficiency: "-",
          type: "招标,政策",
          full: "4,223",
          today: 10,
          seventh: 102,
          time: "1分钟",
        },
        {
          site: "国家公共资源网",
          siteUrl: "http://www.ggzy.gov.cn/",
          num: 12,
          effective: 12,
          lose: "-",
          efficiency: "-",
          type: "资讯,招标",
          full: "4,113",
          today: 5,
          seventh: 203,
          time: "2分钟前",
        },
        {
          site: "江苏省人民政府",
          siteUrl: "http://www.jiangsu.gov.cn/",
          num: 3,
          effective: 1,
          lose: 2,
          efficiency: "80%",
          type: "政策,招标",
          full: "2,115",
          today: 0,
          seventh: "1,023",
          time: "2分钟前",
        },
        {
          site: "南京大学招标采购网",
          siteUrl: "https://zb.nju.edu.cn/",
          num: 4,
          effective: 2,
          lose: 2,
          efficiency: "50%",
          type: "高校,资讯,招标",
          full: "1,221",
          today: 2,
          seventh: 12,
          time: "5分钟前",
        },
        {
          site: "鼓楼医院采购与采购网",
          siteUrl: "https://www.bidcenter.com.cn/newssearchyz-119750434.html",
          num: 100,
          effective: "-",
          lose: 100,
          efficiency: "-",
          type: "医疗,招标",
          full: "12,225",
          today: 23,
          seventh: 11,
          time: "7分钟前",
        },
        {
          site: "东方财富网",
          siteUrl: "https://www.eastmoney.com/",
          num: 212,
          effective: "212",
          lose: "-",
          efficiency: "-",
          type: "医疗,招标",
          full: "445,432",
          today: "22,132",
          seventh: "3,342,135",
          time: "7分钟前",
        },
        {
          site: "汽车之家",
          siteUrl: "https://www.autohome.com.cn/beijing/",
          num: 53,
          effective: "53",
          lose: "-",
          efficiency: "-",
          type: "资讯",
          full: "45,662",
          today: "998,734",
          seventh: "445,532",
          time: "10分钟前",
        },
        {
          site: "国家工信部",
          siteUrl: "https://www.miit.gov.cn/",
          num: 43,
          effective: "43",
          lose: "-",
          efficiency: "-",
          type: "政策",
          full: "887,642",
          today: "445,321",
          seventh: "3,343,219",
          time: "15分钟前",
        },
        {
          site: "山东省人民政府",
          siteUrl: "http://www.shandong.gov.cn/",
          num: 22,
          effective: "22",
          lose: "-",
          efficiency: "-",
          type: "政策",
          full: "223,167",
          today: "443,217",
          seventh: "3,213,764",
          time: "15分钟前",
        },
        {
          site: "新浪网",
          siteUrl: "https://www.sina.com.cn/",
          num: 34,
          effective: "32",
          lose: "2",
          efficiency: "2%",
          type: "资讯,综合",
          full: "33,553,214",
          today: "21,321,321",
          seventh: "1,445,624",
          time: "30分钟前",
        }
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      fields: [
        { key: "site", label: "站点名称" },
        { key: "num", label: "种子总量" },
        { key: "effective", label: "有效种子" },
        { key: "lose", label: "失效种子" },
        { key: "efficiency", label: "种子失效率" },
        { key: "type", label: "信源类型" },
        { key: "full", label: "全部采集数据" },
        { key: "today", label: "今日采集数量" },
        { key: "seventh", label: "7日采集数量" },
        { key: "time", label: "最后检测时间" },
      ],
      allchecked: false,
    };
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发更新");
      }
    }
  },
  methods: {
    /**
     * Search the table data with search input
     */
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    // 跳转添加信源
    addSeed() {
      this.$router.push({
        path: '/seed/addSeed'
      });
      // let routeUrl = this.$router.resolve({
      //   path: '/seed/addSeed'
      // });
      // window.open(routeUrl.href, '_blank');
    },
    // 种子详情
    seedDetail(row){
      console.log(row);
      this.$router.push('/seed/seedDetail')
    },
    jump(v, type){
      console.log(v);
      this.$router.push({
        path: '/spider',
        query: {
          type,
          name: v.site
        }
      })
    },
  },
};
</script>

<template>
  <div class="card">
    <div class="card-body pt-0">
      <!-- 搜索 -->
      <div class="search-box">
        <div class="position-relative search">
          <input type="text" class="form-control" placeholder="请输入关键字" />
          <i class="mdi mdi-magnify search-icon"></i>
        </div>
        <div>
          <b-dropdown dropup variant="secondary" class="butn">
            <template slot="button-content">
              <i class="ri-add-line align-middle" style="font-size: 1rem;"></i>
              <span style="margin:0 20px 0 6px;">信源管理</span>
              <i class="mdi mdi-chevron-up"></i>
            </template>
            <b-dropdown-item-button @click="addSeed">添加信源</b-dropdown-item-button>
            <b-dropdown-item-button>批量删除</b-dropdown-item-button>
          </b-dropdown>
        </div>
      </div>

      <div class="table-responsive">
        <b-table
          class="table-centered text-left"
          :items="ordersData"
          :fields="fields"
          responsive="sm"
          :per-page="perPage"
          :current-page="1"
          thead-class="thead-light"
          @filtered="onFiltered"
        >
          <template v-slot:cell(site)="row">
            <span @click="seedDetail(row)" style="color:#5664d2;cursor: pointer;">{{row.value}}</span>
          </template>
          <template v-slot:cell(num)="row">
            <router-link to="/spider/siteDetail">{{ row.value }}</router-link>
          </template>
          <template v-slot:cell(full)="row">
            <div class="pointer" @click="jump(row.item,'全部')">{{ row.value }}</div>
          </template>
          <template v-slot:cell(today)="row">
            <div class="pointer" @click="jump(row.item,'今日')">{{ row.value }}</div>
          </template>
          <template v-slot:cell(seventh)="row">
            <div class="pointer" @click="jump(row.item,'7日')">{{ row.value }}</div>
          </template>
        </b-table>
      </div>
      <div class="row">
        <div class="col">
          <div class="dataTables_paginate paging_simple_numbers float-right">
            <ul class="pagination pagination-rounded mb-0">
              <!-- pagination -->
              <b-pagination
                v-model="currentPage"
                :total-rows="totalRows"
                :per-page="perPage"
              ></b-pagination>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.search {
  float: left;
  width: 300px;
}
.butn{
  ::v-deep .btn{
    background-color: #252b3b;
    border-color: #252b3b;
    border-radius: 30px;
    display: flex;
    align-items: center;
  }
  ::v-deep .btn-secondary.focus {
    box-shadow: 0 0 0 0.15rem rgb(37 40 58 / 50%);
  }
}
.search-box{
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table-centered{
  ::v-deep thead,::v-deep tbody{
    tr{
      th:last-child,td:last-child{
        text-align: right;
      }
    }
  }
}
</style>
 

